<!--
 * @LastEditTime : 2022-10-31 15:00:15
 * @FilePath     : /pyy/src/views/instandhaltung/add/components/uploader.vue
 * @Description  : 设备维修 > 申请设备维修 > 文件上传
-->
<template>
  <div class="uploader">
    <van-field
      readonly
      name="manualMethodFile"
      v-bind="$attrs"
      label-width="max-content"
      :disabled="disabled"
      @click="handleClick"
    >
      <template #input>
        <van-uploader
          v-show="fileList.length"
          v-model="fileList"
          accept=""
          multiple
          ref="uploaderRef"
          :upload-text="placeholder"
          :after-read="afterRead"
          :disabled="disabled"
        >
          &nbsp;
        </van-uploader>
        <span
          v-show="!fileList.length"
          style="color: #ccc; display: flex; align-items: center"
        >
          {{ placeholder }}
        </span>
      </template>
    </van-field>
  </div>
</template>

<script>
export default {
  name: "Uploader",
  props: ["value", "placeholder", "disabled"],
  model: {
    prop: "value",
    event: "update:value",
  },
  data() {
    return {
      // 上传文件
      fileList: [],
    };
  },
  watch: {
    fileList: {
      handler() {
        this.$emit("update:value", this.fileList);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**
     * 输入框 点击事件
     */
    handleClick() {
      // 手动调用 组件上传 功能
      this.$refs.uploaderRef.chooseFile();
    },

    /**
     * 文件读取完成
     * @param {object} file: 上传文件信息
     */
    afterRead(file) {
      //console.log("上传文件信息", file);
    },
  },
};
</script>

<style lang="less" scoped>
.uploader {
  width: 100%;
  height: max-content;
}
</style>
